import { ArrowLeftOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, List, Modal, Pagination, Popconfirm } from 'antd';
import 'antd/dist/antd.css';
import moment from 'moment';
import React from 'react';
import { Link, useParams } from 'react-router-dom';
import { FMT_YMD } from '../common/constant';
import Home from '../common/home';
import http from '../common/http';

const { confirm } = Modal

class TypeDisplayForm extends React.Component {
    state = {
        loading: false,
        data: {
            total: 2,
            pageSize: 10,
            dataList: [{ id: 2, title: "test", contentSingleLine: "bbbbb", createDate: 2222222222 }]
        }
    }

    constructor(props) {
        super(props)
    }

    componentDidMount() {
        this.fetch()
    }

    fetch = (pageIndex = 0) => {
        const typeId = this.props.match.params.typeId
        this.setState({ loading: true, typeId: typeId })
        const pageSize = this.state.data.pageSize
        http.get("/api/note/note/find-by-type", { params: { typeId, pageIndex, pageSize } })
            .then(res => {
                var data = res.data
                this.setState({
                    loading: false,
                    data
                })
            })
    }

    delete = (id) => {
        http.delete("/api/note/note/delete/" + id)
            .then(res => {
                this.fetch()
            })
    }

    onChange = (pageIndex) => {
        this.fetch(pageIndex - 1)
    }

    render() {
        const butStyle = { marginLeft: '10px' }
        return (
            <div>
                <Home />
                <Link to="/types"><Button type="primary" > <ArrowLeftOutlined /> 返回</Button></Link>
                <Link to={{ pathname: '/note-edit', search: "typeId=" + this.state.typeId }}>
                    <Button style={butStyle} type="primary" > <PlusOutlined /> 新建笔记 </Button>
                </Link>
                <div style={{ marginTop: 10 }} />

                <List bordered
                    loading={this.state.loading}
                    dataSource={this.state.data.dataList}
                    locale={{ emptyText: '暂无数据' }}
                    renderItem={item => (
                        <List.Item>
                            <Link to={{ pathname: '/note-edit', search: "sign=new&noteId=" + item.id }} target="_blank">
                                <b>{item.title}</b> <br />
                                【{moment(item.createDate).format(FMT_YMD)}】{item.contentSingleLine}
                            </Link>
                            <div style={{ position: 'absolute', right: 20, width: '200', padding: '10px 10px', textAlign: 'right' }}>
                                <Popconfirm title={`确认删除【${item.title}】?`} onConfirm={() => { this.delete(item.id) }}>
                                    <Button type="danger"> <DeleteOutlined /> 删除</Button>
                                </Popconfirm>
                            </div>
                        </List.Item>
                    )} />
                <div style={{ marginTop: 10 }} />
                <Pagination onChange={this.onChange} total={this.state.data.total} pageSize={this.state.data.pageSize} />
            </div >
        )
    }
}

// export default TypeDisplayForm
function WithNavigate(props) {
    const match = { params: useParams() };
    return <TypeDisplayForm {...props} match={match} />
}
export default WithNavigate